<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                xmlns:sec="http://www.springframework.org/security/facelets/tags"
                xmlns:arq="http://java.sun.com/jsf/composite/ezcomp"
                template="../../templates/layout.xhtml"
                >

    <ui:define name="content">
        <h:form id="formUserTable">
            <h:panelGroup >
                <table class="referencesmall" width="100%">
                    <thead style="font-size: 0.9em;"><tr>
                            <th align='center'>
                                <h:outputText value="#{msg.nome}" /><br></br>
                                <h:inputText value="#{usuarioController.nome}" styleClass="selectTableFilter" id="search"
                                             title="#{msg.tipoBuscaContem}">
                                    <p:ajax event="blur" listener="#{usuarioController.recreateTable()}" update="formUserTable"/>
                                </h:inputText>
                            </th>
                            <th align='center'><h:outputText value="#{msg.sobreNome}"/></th>
                            <th align='center'>
                                <h:outputText value="#{msg.login}"/><br></br>
                                <h:inputText value="#{usuarioController.login}" styleClass="selectTableFilter" id="search2"
                                             title="#{msg.tipoBuscaContem}">
                                    <p:ajax event="blur" listener="#{usuarioController.recreateTable()}" update="formUserTable"/>
                                </h:inputText>
                            </th>
                            <th align='center'>
                                <h:outputText value="#{msg.email}"/>
                            </th>
                            <th width="150" class="ac"></th>
                        </tr></thead>
                    <tbody>
                        <ui:repeat value="#{usuarioController.items}" var="item" varStatus="x">
                            <tr >
                                <td align='left'><h:outputText value="#{item.firstName}"/></td>
                                <td align='left'><h:outputText value="#{item.lastName}"/></td>
                                <td align='center'><h:outputText value="#{item.userId}"/></td>
                                <td align='center'><h:outputText value="#{item.email}"/></td>
                                <td><h:commandLink action="#{usuarioController.destroy}" styleClass="ico del" value="#{msg.remover}" 
                                                   onclick="return confirm('#{msg.desejaRemover} #{item.firstName} #{item.lastName}?');" 
                                                   id="removeLink"/>
                                    <h:outputText value=" "/>
                                    <p:spacer width="15px" height="5px"/>
                                    <h:commandLink styleClass="ico edit" action="#{usuarioController.prepareEdit}" value="#{msg.editar}"
                                                   id="editLink"/>
                                </td>
                            </tr>
                        </ui:repeat>
                    </tbody>
                </table>
            </h:panelGroup>
            <arq:paginator entityBean="#{usuarioController}"/>
        </h:form>
        <ui:include src="form.xhtml"/>
    </ui:define>
</ui:composition>

